<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('后台管理')"/>
</head>
<body class="hold-transition skin-blue sidebar-mini layout-boxed">
<div class="wrapper">
    <th:block th:include="include :: headbar"/>
    <th:block th:include="include :: sidebar"/>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>&nbsp;</h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">用户管理</a></li>
                <li class="active">会员管理</li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-solid">
                <form class="box-header with-border form-inline" id="form">
                    <input type="text" class="form-control input-sm" placeholder="设备编号" name="deviceId">
                    <input type="text" class="form-control input-sm" placeholder="微信用户名" name="nickname">
                    <input type="text" class="form-control input-sm" placeholder="openId" name="openId">
                    <button type="button" class="btn btn-success btn-sm btn-flat" onclick="$.table.search('form')"><i
                            class="fa fa-search"></i> 搜索
                    </button>
                </form>
                <div class="box-body">

                    <table id="bootstrap-table" data-mobile-responsive="true"></table>
                </div>
            </div>
        </section>
    </div>
    <th:block th:include="include :: copyright"/>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var prefix = "/mall/member";
    $(function () {
        var deviceId = 0;
        var sum = 0;
        var options = {
            url: prefix + "/list",
            createUrl: prefix + '/add',
            removeUrl: prefix + '/remove',
            updateUrl: prefix + '/edit/{id}',
            sortName: "",
            uniqueId: 'memberId',
            modalName: "",
            modalWidth: 350,
            modalHeight: 400,
            columns: [
                {radio: true},
                {title: '图片', field: 'headImgUrl', valign: 'middle', formatter: imgFmt},
                {field: 'deviceId', title: '设备编号', formatter: devFmt},
                {field: 'nickname', title: '微信用户名'},
                {field: 'openId', title: 'openId'},
                {field: 'sum', title: '消费总额'},
                {field: 'groupId', title: '购买车模数量'}
            ]
        };
        $.table.init(options);
    });

    function imgFmt(value, row, index) {
        return '<img src="' + value + '" width="26px"/>';
    }

    function statusFormatter(value, row, index) {
        if (row.status === 1) {
            return '<i class=\"fa fa-toggle-on text-info fa-lg\" onclick="disable(\'' + row.memberId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-off text-info fa-lg\" onclick="enable(\'' + row.memberId + '\')"></i> ';
        }
    }

    function devFmt(value, row, index) {
        if (value === null || value === '') {
            return "-";
        } else {
            return value;
        }
    }

    function disable(memberId) {
        $.post(prefix + "/changeStatus", {"memberId": memberId, "status": 0}, function (resp) {
            $.table.refresh();
        });
    }

    function enable(memberId) {
        $.post(prefix + "/changeStatus", {"memberId": memberId, "status": 1}, function (resp) {
            $.table.refresh();
        });
    }
</script>
</body>
</html>
